<template>
<div class="home-main">
     <div id="col" style="width: 95%; height: 90%"></div>
</div>

</template>
<script>
import sele from '@/view/test/city.vue'
import echarts from 'echarts'
import ReviewApi from '@/api/check/voReview.js'
import {
  Message
} from 'iview'

export default {
  name: '',
  components: {
    sele
  },
  data () {
    return {
      data: [],
      title: '',
      areaData: [],
      queryData: {
        selectArea: 0,
        date: []
      },
      myChart: null,
      option: {

      }
    }
  },
  mounted () {
    setTimeout(() => {
      this.getData()
    })
  },
  methods: {
    async getData () {
      let data = (await ReviewApi.getRank()).data
      this.data = []
      this.areaData = []
      data.forEach(e => {
        this.data.push(e.score)
        this.areaData.push(e.areaName)
      })
      this.hadleGetFilesListApi(this.data, this.areaData)
    },
    hadleGetFilesListApi (data, area) {
      console.log(data)
      const option = {
        title: [{
          text: '考评排名',
          textStyle: {
            color: '#fff',
            fontSize: 20
          },
          x: 'left'
        }],
        color: ['#ffdf25', '#36a9ce', '#d0e17d'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '1%',
          right: '4%',
          bottom: '2%',
          containLabel: true
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            name: '小区',
            axisTick: { show: false },
            data: area,
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#fff', // 左边线的颜色
                width: '1'// 坐标线的宽度
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '分数',
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#fff', // 左边线的颜色
                width: '1'// 坐标线的宽度
              }
            }
          }
        ],
        series: [
          {
            name: '分数',

            type: 'bar',
            barGap: 0,
            itemStyle: {
              normal: {
                // 定制显示（按顺序）
                color: function (params) {
                  var colorList = ['#0f86e8', '#23be7a', '#e5d71f', '#0ff', '#B74AE5', '#0AAF9F', '#E89589', '#16A085', '#4A235A', '#C39BD3 ', '#F9E79F', '#BA4A00', '#ECF0F1', '#616A6B', '#EAF2F8', '#4A235A', '#3498DB' ]
                  return colorList[params.dataIndex]
                }
              }
            },
            data: data
          }
        ]
      }
      let myChart = this.$echarts.init(document.getElementById('col'))
      myChart.setOption(option)
      // 默认高亮
      let index = 0 // 高亮索引
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: index,
        dataIndex: index
      })
      //   myChart.on('mouseover', function (e) {
      //     if (e.dataIndex != index) {
      //       myChart.dispatchAction({
      //         type: 'downplay',
      //         seriesIndex: 0,
      //         dataIndex: index
      //       })
      //     }
      //   })
      //   myChart.on('mouseout', function (e) {
      //     index = e.dataIndex
      //     myChart.dispatchAction({
      //       type: 'highlight',
      //       seriesIndex: 0,
      //       dataIndex: e.dataIndex
      //     })
      //   })
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
  }
}
</script>
<style>
	.home-main {
    min-width: 1300px;
    min-height: 500px;
    width: 100%;
    height: 100%;
    background-image: url(/img/ksh.b9d92e66.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
</style>
